<template>
    <view class="goods-container">
        <view v-if="goodsList.length == 0">
            <u-empty text="暂无商品" mode="list"></u-empty>
        </view>
        <u-waterfall v-model="goodsList" ref="uWaterfall">
            <template v-slot:left="{leftList}">
                <navigator :url="'/goods-module/goods?goods_id=' + item.goods_id" hover-class="none" class="demo-warter" v-for="(item, index) in leftList" :key="index">
                    <view class="demo-img-wrap">
                        <u-image class="demo-image" height="300rpx" :src="item.thumbnail" mode="widthFix"></u-image>
                    </view>
                    <view class="demo-title u-line-2">
                        {{item.goods_name}}
                    </view>
                    <!-- #ifdef MP -->
                    <view class="dome-price" style="color: #ff5000; font-weight: 600;">
                        <text class="u-font-12">￥</text>
                        <text class="u-font-18">{{ item.price }}</text>
                    </view>
                    <!-- #endif -->
                    <!-- #ifdef APP-PLUS || H5 -->
                        <custom-price :price="item.price" :size="34" :fontWeight="600"></custom-price>
                    <!-- #endif -->
                </navigator>
            </template>
            <template v-slot:right="{rightList}">
                <navigator :url="'/goods-module/goods?goods_id=' + item.goods_id" hover-class="none" class="demo-warter" v-for="(item, index) in rightList" :key="index">
                    <view class="demo-img-wrap">
                        <u-image class="demo-image" height="300rpx" :src="item.thumbnail" mode="widthFix"></u-image>
                    </view>
                    <view class="demo-title u-line-2">
                        {{item.goods_name}}
                    </view>
                    <!-- #ifdef MP -->
                    <view class="dome-price" style="color: #ff5000; font-weight: 600;">
                        <text class="u-font-12">￥</text>
                        <text class="u-font-18">{{ item.price }}</text>
                    </view>
                    <!-- #endif -->
                    <!-- #ifdef APP-PLUS || H5 -->
                     <custom-price :price="item.price" :size="34" :fontWeight="600"></custom-price>
                    <!-- #endif -->
                </navigator>
            </template>
        </u-waterfall>
    </view>
</template>

<script>
    /**
     * 为你推荐展示组件
     *
     * ===== 使用场景 ======
     * 所有展示为你推荐商品的地方
     *
     * ===== 参数 =====
     * title        标题
     * categoryId   分类ID
     */
    import { Foundation } from '@/ui-utils/index.js'

    export default {
        data() {
            return {

            }
        },
        props: {
            goodsList: {
                type: Array,
                default: []
            },
        },
        methods: {

        }
    }
</script>

<style>

</style>

